<template>
                <div class="i-table-no-border">
                    <Table ref="table" :columns="columns" :data="data" size="small">
                        <template slot-scope="{ row }" slot="basic"><a @click="handlePatientDetail">{{ row.basic }}</a></template>
                        <template slot-scope="{ row }" slot="diagnosis">
                            <Tag v-if="row.diagnosis === 0" color="blue">初诊</Tag>
                            <Tag v-if="row.diagnosis === 1" color="volcano">复诊</Tag>
                            <Tag v-if="row.diagnosis === 2" color="cyan">未及时复诊</Tag>
                            <Tag v-if="row.diagnosis === 3" color="green">抗复发</Tag>
                            <Tag v-if="row.diagnosis === 4" color="orange">流失</Tag>
                            <Tag v-if="row.diagnosis === 5" color="red">断诊</Tag>
                        </template>
                        <template slot-scope="{ row }" slot="label">
                            <Tag v-if="row.label === 0">在乎费用</Tag>
                            <Tag v-if="row.label === 1">专家</Tag>
                            <Tag v-if="row.label === 2">敏感</Tag>
                            <Tag v-if="row.label === 3">远程</Tag>
                        </template>
                        <template slot-scope="{ row }" slot="channel">
                            <Badge v-if="row.channel === 0" status="success" text="微信" />
                            <Badge v-if="row.channel === 1" status="processing" text="抖音" />
                            <Badge v-if="row.channel === 2" status="error" text="市场转诊" />
                            <Badge v-if="row.channel === 3" status="warning" text="自然到诊" />
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <a @click="handleperfect">完善</a>
                        </template>
                    </Table>
                    <div class="ivu-mt iuv-text-center" slot="footer">
                        <Page :total="100" show-elevator show-sizer show-total></Page>
                    </div>
                     <Modal v-model="perfectModal" title="信息完善" :mask-closable = 'false' width="650">
                    <Progress :percent="60" class="ivu-mb-16" status="active" />
                    <Form :model="formData" label-position='top' class="ivu-mt">
                            <Row :gutter="24">
                    <Col span="8">
                        <FormItem label="姓名">
                            <Input v-model="formData.name" />
                        </FormItem>
                    </Col>
                   <Col span="8">
                        <FormItem label="手机号">
                            <Input v-model="formData.phone"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="性别">
                            <RadioGroup v-model="formData.gender">
                                <Radio label="男"></Radio>
                                <Radio label="女"></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    </Row>
                    <Row :gutter="24">
                     <Col span="8">
                        <FormItem label="城市">
                            <Select filterable>
                                <Option value="shanghai">上海</Option>
                                <Option value="beijing">北京</Option>
                                <Option value="guangzhou">广州</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="一级病种">
                    <Select v-model="formData.disease"  placeholder="一级病种">
                                <Option value="白癜风">白癜风</Option>
                                <Option value="皮杂">皮杂</Option>
                            </Select>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem  label="二级病种">
                    <Select v-model="formData.disease1"  placeholder="二级病种">
                                <Option value="白癜风">白癜风</Option>
                                <Option value="皮杂">皮杂</Option>
                            </Select>
                    </FormItem>
                    </Col>
                    <Col span="16">
                        <FormItem label="部位">
                            <Select v-model="formData.position" multiple>
                                <Option value="header">头部</Option>
                                <Option value="handle">手部</Option>
                                <Option value="foot">脚部</Option>
                            </Select>
                        </FormItem>
                    </Col>

                     <Col span="8">
                        <FormItem label="风控类型">
                            <Select v-model="formData.risk">
                                <Option value="敏感">敏感</Option>
                                <Option value="黑名单">黑名单</Option>
                                <Option value="领导介绍">领导介绍</Option>
                                <Option value="退费患者">退费患者</Option>
                                <Option value="正常">正常</Option>
                            </Select>
                        </FormItem>
                    </Col>
                     <Col span="16">
                        <FormItem label="标签">
                            <Select v-model="formData.label" multiple :max-tag-count="3">
                                <OptionGroup label="诊疗意向">
                                    <Option v-for="item in labelList" :value="item.value" :key="item.vaule">
                                        {{item.label}}
                                    </Option>
                                </OptionGroup>
                                <OptionGroup label="标签组">
                                    <Option value="标签名称">标签名称</Option>
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col>
                        <Col span="8">
                        <FormItem label="效果类型">
                            <Select v-model="formData.effect">
                                <Option value="扩散">扩散</Option>
                                <Option value="无效">无效</Option>
                                <Option value="见效-10%<">见效-10%</Option>
                                <Option value="显效-50%">显效-50%</Option>
                                <Option value="治愈-90%">治愈-90%</Option>
                                <Option value="复发">复发</Option>
                            </Select>
                        </FormItem>
                    </Col>
                            </Row>
                    </Form>
                     </Modal>
                </div>
</template>
<script>
    import returnVisit from '@/components/returnVisit';
    export default {
        components: { returnVisit },
        data () {
            return {
                perfectModal: false,
                formData: {
                    name: '',
                    phone: '',
                    gender: '',
                    disease: '',
                    disease1: '',
                    position: '',
                    label: '',
                    risk: '',
                    effect: ''
                },
                labelList: [
                    {
                        value: '住院意向',
                        label: '住院意向'

                    },
                    {
                        value: '手术意向',
                        label: '手术意向'

                    }
                ],
                columns: [
                    {
                        title: '基本信息',
                        key: 'basic',
                        slot: 'basic',
                        minWidth: 150,
                        fixed: 'left'
                    },
                    {
                        title: '完善度',
                        key: 'perfect',
                        minWidth: 118,
                        sortable: true
                    },
                    {
                        title: '诊疗号',
                        key: 'consultant',
                        minWidth: 100
                    },
                    {
                        title: '诊室',
                        key: 'treatmentRoom',
                        minWidth: 100
                    },
                    // {
                    //     title: '电话',
                    //     key: 'phone',
                    //     minWidth: 150
                    // },
                    {
                        title: '上次到诊',
                        key: 'lastTime',
                        sortable: true,
                        minWidth: 118
                    },
                    {
                        title: '下次复诊',
                        key: 'nextTime',
                        sortable: true,
                        minWidth: 118
                    },
                    {
                        title: '上次回访时间',
                        key: 'lastTime',
                        sortable: true,
                        minWidth: 130
                    },
                    {
                        title: '就诊类型',
                        slot: 'diagnosis',
                        minWidth: 138
                    },
                    {
                        title: '患者标签',
                        slot: 'label',
                        minWidth: 138
                    },
                    {
                        title: '复诊次数',
                        key: 'frequency',
                        sortable: true,
                        minWidth: 108
                    },
                    {
                        title: '未到诊天数',
                        key: 'noArrived',
                        sortable: true,
                        minWidth: 128
                    },
                    {
                        title: '地区',
                        key: 'region',
                        minWidth: 100
                    },
                    {
                        title: '来源',
                        minWidth: 120,
                        slot: 'channel'
                    },
                    {
                        title: '最近回访内容',
                        minWidth: 120,
                        key: 'remarks'
                    },
                    {
                        title: '操作',
                        minWidth: 70,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                data: [
                    {
                        basic: '刘鸾英 女 26岁',
                        perfect: '60%',
                        consultant: 13526587,
                        treatmentRoom: '三诊',
                        lastTime: '2016-10-03',
                        phone: 13385658568,
                        wx: 'sky15258',
                        diagnosis: Math.floor(Math.random() * 5),
                        frequency: 3,
                        noArrived: 15,
                        region: '合肥',
                        label: Math.floor(Math.random() * 3),
                        disease: '白癜风',
                        channel: Math.floor(Math.random() * 3),
                        nextTime: '2016-10-08',
                        remarks: '在外地'
                    },
                    {
                        basic: '张在峰 男 36岁',
                        perfect: '50%',
                        consultant: 13526587,
                        treatmentRoom: '三诊',
                        lastTime: '2016-10-02',
                        phone: 13385658568,
                        wx: 'ss258',
                        diagnosis: Math.floor(Math.random() * 5),
                        frequency: 2,
                        noArrived: 265,
                        region: '合肥',
                        label: Math.floor(Math.random() * 3),
                        disease: '白癜风',
                        channel: Math.floor(Math.random() * 3),
                        nextTime: '2016-10-08',
                        remarks: '在等活动'
                    }
                ]
            }
        },
        methods: {
            handlePatientDetail (row) {
                this.$router.push('/patient/detailed')
            },
            handleperfect () {
                this.perfectModal = true
            }
        }
    }
</script>
